<template>
  <div v-wechat-title="$route.meta.title"></div>
  <el-divider content-position="center">我是一条分割线哦</el-divider>
  <div v-for="article in info.results" v-bind:key="article.url" id="articles">
    <el-card shadow="hover" class="box-card">
      <div class="grid" :style="gridStyle(article)">
        <div class="image-container">
          <img :src="imageIfExists(article)" alt="" class="image" />
        </div>

        <div class="tag-container">
          <span v-if="article.category !== null" class="category">
            {{ article.category.title }}
          </span>
          <span v-for="tag in article.tags" v-bind:key="tag" class="tag">
            {{ tag }}
          </span>
          <br /><br />
          <div>
            <router-link
              :to="{ name: 'ArticleDetail', params: { id: article.id } }"
              class="article-title"
            >
              {{ article.title }}
            </router-link>
          </div>
          <br />
          <div class="created-time">
            {{ formatted_time(article.created) }} created
          </div>
        </div>
      </div>
      <br />
    </el-card>
  </div>

  <div id="paginator">
    <span v-if="is_page_exists('previous')">
      <router-link :to="get_path('previous')" @click="refresh" class="page">
        pre
      </router-link>
    </span>
    <span class="current-page">
      {{ get_page_param("current") }}
    </span>
    <span v-if="is_page_exists('next')">
      <router-link :to="get_path('next')" @click="refresh" class="page">
        next
      </router-link>
    </span>
  </div>

  <el-backtop :bottom="100">
    <div>
      up
    </div>
  </el-backtop>
</template>

<script>
import { ref } from "vue";
import { useRoute } from "vue-router";
import getArticleData from "@/composables/getArticleData.js";
import pagination from "@/composables/pagination.js";
import articleGrid from "@/composables/articleGrid.js";
import formattedTime from "@/composables/formattedTime.js";

export default {
  name: "ArticleList",

  setup() {
    const info = ref("");
    // 创建路由
    const route = useRoute();
    const kwargs = ref({ page: 0, searchText: "" });
    getArticleData(info, route, kwargs);
    const { is_page_exists, get_page_param, get_path } = pagination(
      info,
      route
    );
    const { imageIfExists, gridStyle } = articleGrid();
    const formatted_time = formattedTime;

    return {
      info,
      is_page_exists,
      get_page_param,
      get_path,
      imageIfExists,
      gridStyle,
      formatted_time,
    };
  },
  methods: {
    refresh: function() {
      this.$router.go(0);
    },
  },
};
</script>

<!-- "scoped" 使样式仅在当前组件生效 -->
<style scoped>
.image {
  width: 180px;
  border-radius: 10px;
  box-shadow: darkslategrey 0 0 12px;
}
.image-container {
  width: 200px;
  padding-top: 15px;
}
.grid {
  padding-bottom: 10px;
}

#articles {
  padding: 10px;
}

.article-title {
  font-size: 21px;
  font-family: KaiTi;
  color: black;
  text-decoration: none;
  padding: 5px 0 5px 0;
}
.article-title:hover {
  color: grey;
}
.created-time {
  font-size: 13px;
}
.tag {
  padding: 2px 5px 2px 5px;
  margin: 5px 5px 5px 0;
  font-family: Georgia, Arial, sans-serif;
  font-size: small;
  background-color: LightSkyBlue;
  color: whitesmoke;
  border-radius: 5px;
}
.tag-container {
  padding-top: 20px;
}

#paginator {
  text-align: center;
  padding-top: 50px;
  font-family: "Verdana";
}

a {
  color: black;
}

.current-page {
  font-family: "Verdana";
  padding-left: 10px;
  padding-right: 10px;
}

.category {
  padding: 5px 8px 5px 8px;
  margin: 5px 5px 5px 0;
  font-family: Georgia, Arial, sans-serif;
  font-size: small;
  background-color: LightPink;
  color: whitesmoke;
  border-radius: 15px;
}

.hr {
  padding-left: 150px;
  padding-right: 150px;
}

.box-card {
  width: 1000px;
  padding-left: 150px;
}
.page {
  text-decoration: none;
}
.page:hover {
  color: lightskyblue;
}
</style>
